<template>
  <div class="addZoom">
    <el-dialog
      title="新建分组"
      :visible.sync="isshow"
      width="40%"
      :show-close="false"
    >
      <div style="margin-bottom:20px;">分组名称</div>
      <el-input v-model="zoomName" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="addZoom"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isshow"],
  data() {
    return {
      zoomName: "" //分组名称
    };
  },
  methods: {
    cancel() {
      this.$emit("changeShowAddZoomDialog", false);
    },
    async addZoom() {
      if (!this.zoomName) {
        this.$message.error("请填写新建分组名称");
        return false;
      }
      await this.$http({
        url: "/cmsadmin/index/materialLibrary/addMaterialLibraryGroup",
        method: "post",
        data: {
          imgGroupName: this.zoomName
        }
      })
        .then(res => {
          this.$message.success("新建分组成功");
          setTimeout(() => {
            this.$router.go(0);
          }, 1500);
        })
        .catch(err => {
          this.$message.error("新建分组失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped></style>
